<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>
        <style type="text/css">

           #ch1+.div1{
                width:0px;
                height:0px;
                background-color: red;
                transform: rotate(0deg);/*旋转0°*/
                opacity:0;


                transition: height 1s,width 1s,transform 1s,opacity 10s;
            }

            #ch1:checked+.div1{
                height:400px;
                width:100px;
                transform: rotate(1440deg);
                opacity:1;
            }
           
        </style>
    </head>
    <body>
        <label for="ch1" >点我</label>
        <input type="checkbox" id="ch1" style="display:none;" />
        <div class="div1" >

        </div>


    </body>

</html>